<template>
  <div class="album-create-view">
    <!-- 页面头部 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <div class="header-left">
          <button class="back-btn" @click="goBack">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2"/>
            </svg>
            返回
          </button>
        </div>

        <div class="header-info">
          <h1 class="page-title">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
              <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
              <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ isEditing ? '编辑智能相册' : '创建智能相册' }}
          </h1>
          <p class="page-description">{{ isEditing ? '修改相册信息和智能筛选规则' : '创建基于规则的智能相册，自动收集符合条件的媒体文件' }}</p>
        </div>

        <div class="header-actions">
          <button :disabled="!hasChanges" class="action-btn secondary" @click="saveDraft">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" stroke="currentColor" stroke-width="2"/>
              <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2"/>
              <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2"/>
            </svg>
            保存草稿
          </button>

          <button :disabled="!isValid" class="action-btn primary" @click="createAlbum">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ isEditing ? '更新相册' : '创建相册' }}
          </button>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="content-grid">
        <!-- 左侧：表单配置 -->
        <div class="form-section">
          <!-- 基本信息 -->
          <div class="form-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="2" x2="6" y1="12" y2="12"/>
                  <line stroke="currentColor" stroke-width="2" x1="18" x2="22" y1="12" y2="12"/>
                  <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="2" y2="6"/>
                  <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="18" y2="22"/>
                </svg>
                基本信息
              </h2>
            </div>

            <div class="card-content">
              <div class="form-group">
                <label class="form-label required">相册名称</label>
                <input
                  v-model="albumForm.name"
                  class="form-input"
                  maxlength="50"
                  placeholder="例如：家庭旅行 2024"
                  type="text"
                  @input="validateForm"
                />
                <div class="input-help">{{ albumForm.name.length }}/50</div>
              </div>

              <div class="form-group">
                <label class="form-label">相册描述</label>
                <textarea
                  v-model="albumForm.description"
                  class="form-textarea"
                  maxlength="200"
                  placeholder="描述这个相册的内容和用途..."
                  rows="3"
                  @input="validateForm"
                ></textarea>
                <div class="input-help">{{ albumForm.description.length }}/200</div>
              </div>

              <div class="form-group">
                <label class="form-label">封面图片</label>
                <div class="cover-upload">
                  <div v-if="albumForm.coverImage" class="cover-preview">
                    <img :src="albumForm.coverImage" alt="封面预览" />
                    <button class="remove-cover" @click="albumForm.coverImage = ''">
                      <svg fill="none" viewBox="0 0 24 24">
                        <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                        <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                      </svg>
                    </button>
                  </div>
                  <div v-else class="cover-placeholder" @click="uploadCover">
                    <svg fill="none" viewBox="0 0 24 24">
                      <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                      <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                      <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    <span>点击上传封面图片</span>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">隐私设置</label>
                <div class="privacy-options">
                  <label class="privacy-option">
                    <input v-model="albumForm.isPublic" :value="false" type="radio" />
                    <div class="option-content">
                      <svg fill="none" viewBox="0 0 24 24">
                        <rect height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="11"/>
                        <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
                        <path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      <div class="option-text">
                        <strong>私人相册</strong>
                        <span>只有你可以查看</span>
                      </div>
                    </div>
                  </label>
                  <label class="privacy-option">
                    <input v-model="albumForm.isPublic" :value="true" type="radio" />
                    <div class="option-content">
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2"/>
                        <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      <div class="option-text">
                        <strong>家庭共享</strong>
                        <span>所有家庭成员可见</span>
                      </div>
                    </div>
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 智能筛选规则 -->
          <div class="form-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2"/>
                </svg>
                智能筛选规则
              </h2>
              <p class="card-subtitle">设置规则自动收集符合条件的媒体文件</p>
            </div>

            <div class="card-content">
              <!-- 文件类型筛选 -->
              <div class="rule-group">
                <label class="rule-label">文件类型</label>
                <div class="type-filters">
                  <label
                    v-for="type in fileTypes"
                    :key="type.value"
                    :class="{ active: albumForm.rules.fileTypes.includes(type.value) }"
                    class="type-option"
                  >
                    <input
                      v-model="albumForm.rules.fileTypes"
                      :value="type.value"
                      type="checkbox"
                      @change="validateForm"
                    />
                    <div class="type-content">
                      <component :is="type.icon" class="type-icon" />
                      <span>{{ type.label }}</span>
                    </div>
                  </label>
                </div>
              </div>

              <!-- 日期范围筛选 -->
              <div class="rule-group">
                <label class="rule-label">日期范围</label>
                <div class="date-range-options">
                  <div class="quick-dates">
                    <button
                      v-for="preset in datePresets"
                      :key="preset.value"
                      :class="{ active: selectedDatePreset === preset.value }"
                      class="date-preset"
                      @click="applyDatePreset(preset)"
                    >
                      {{ preset.label }}
                    </button>
                  </div>
                  <div class="custom-date-range">
                    <div class="date-input-group">
                      <label>开始日期</label>
                      <input
                        v-model="albumForm.rules.dateRange.startDate"
                        class="date-input"
                        type="date"
                        @change="validateForm"
                      />
                    </div>
                    <div class="date-input-group">
                      <label>结束日期</label>
                      <input
                        v-model="albumForm.rules.dateRange.endDate"
                        class="date-input"
                        type="date"
                        @change="validateForm"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <!-- 标签筛选 -->
              <div class="rule-group">
                <label class="rule-label">标签筛选</label>
                <div class="tags-input">
                  <div class="tag-list">
                    <span
                      v-for="tag in albumForm.rules.tags"
                      :key="tag"
                      class="tag-item"
                    >
                      {{ tag }}
                      <button @click="removeTag(tag)">
                        <svg fill="none" viewBox="0 0 24 24">
                          <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                          <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                        </svg>
                      </button>
                    </span>
                  </div>
                  <input
                    v-model="newTag"
                    class="tag-input"
                    placeholder="输入标签后按回车添加"
                    type="text"
                    @keyup.enter="addTag"
                  />
                </div>
                <div class="popular-tags">
                  <span class="popular-label">热门标签：</span>
                  <button
                    v-for="tag in popularTags"
                    :key="tag"
                    :disabled="albumForm.rules.tags.includes(tag)"
                    class="popular-tag"
                    @click="addPopularTag(tag)"
                  >
                    {{ tag }}
                  </button>
                </div>
              </div>

              <!-- 人物筛选 -->
              <div class="rule-group">
                <label class="rule-label">包含人物</label>
                <div class="people-selector">
                  <div class="selected-people">
                    <div
                      v-for="person in albumForm.rules.people"
                      :key="person"
                      class="person-item"
                    >
                      <div class="person-avatar">
                        <img :alt="person" :src="getPersonAvatar(person)" />
                      </div>
                      <span>{{ person }}</span>
                      <button @click="removePerson(person)">
                        <svg fill="none" viewBox="0 0 24 24">
                          <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                          <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div class="people-options">
                    <button
                      v-for="person in availablePeople"
                      :key="person.name"
                      class="person-option"
                      @click="addPerson(person.name)"
                    >
                      <div class="person-avatar">
                        <img :alt="person.name" :src="person.avatar" />
                      </div>
                      <span>{{ person.name }}</span>
                    </button>
                  </div>
                </div>
              </div>

              <!-- 位置筛选 -->
              <div class="rule-group">
                <label class="rule-label">拍摄位置</label>
                <div class="location-input">
                  <div class="location-list">
                    <span
                      v-for="location in albumForm.rules.locations"
                      :key="location"
                      class="location-item"
                    >
                      <svg fill="none" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/>
                        <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      {{ location }}
                      <button @click="removeLocation(location)">
                        <svg fill="none" viewBox="0 0 24 24">
                          <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
                          <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
                        </svg>
                      </button>
                    </span>
                  </div>
                  <input
                    v-model="newLocation"
                    class="location-input-field"
                    placeholder="输入位置名称后按回车添加"
                    type="text"
                    @keyup.enter="addLocation"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：预览区域 -->
        <div class="preview-section">
          <div class="preview-card glass-card">
            <div class="card-header">
              <h2 class="card-title">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                智能预览
              </h2>
              <div class="preview-stats">
                <span class="stat-item">
                  <svg fill="none" viewBox="0 0 24 24">
                    <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                    <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                    <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  {{ matchedMedia.length }} 个匹配文件
                </span>
                <button :disabled="previewLoading" class="refresh-preview" @click="refreshPreview">
                  <svg :class="{ 'animate-spin': previewLoading }" fill="none" viewBox="0 0 24 24">
                    <polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2"/>
                    <polyline points="1 20 1 14 7 14" stroke="currentColor" stroke-width="2"/>
                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  刷新预览
                </button>
              </div>
            </div>

            <div class="card-content">
              <div v-if="previewLoading" class="preview-loading">
                <div class="loading-spinner"></div>
                <p>正在分析匹配的媒体文件...</p>
              </div>

              <div v-else-if="matchedMedia.length === 0" class="preview-empty">
                <div class="empty-icon">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
                <h3>暂无匹配文件</h3>
                <p>根据当前筛选条件，没有找到匹配的媒体文件</p>
                <div class="suggestions">
                  <p>建议：</p>
                  <ul>
                    <li>放宽筛选条件范围</li>
                    <li>检查日期范围设置</li>
                    <li>确认标签拼写是否正确</li>
                  </ul>
                </div>
              </div>

              <div v-else class="preview-grid">
                <div
                  v-for="media in matchedMedia.slice(0, 12)"
                  :key="media.id"
                  class="preview-item"
                  @click="previewMedia(media)"
                >
                  <div class="media-thumbnail">
                    <img v-if="media.thumbnailUrl" :alt="media.name" :src="media.thumbnailUrl" />
                    <div v-else :class="media.fileType" class="placeholder-icon">
                      <component :is="getFileTypeIcon(media.fileType)" />
                    </div>
                    <div class="media-overlay">
                      <div class="media-type">{{ getMediaTypeLabel(media.fileType) }}</div>
                      <div v-if="media.duration" class="media-duration">
                        {{ formatDuration(media.duration) }}
                      </div>
                    </div>
                  </div>
                  <div class="media-info">
                    <h4 class="media-name">{{ media.name }}</h4>
                    <div class="media-meta">
                      <span class="media-date">{{ formatDate(media.date) }}</span>
                      <span class="media-size">{{ formatFileSize(media.fileSize) }}</span>
                    </div>
                  </div>
                </div>

                <div v-if="matchedMedia.length > 12" class="more-results">
                  <div class="more-count">
                    <svg fill="none" viewBox="0 0 24 24">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <line stroke="currentColor" stroke-width="2" x1="12" x2="12" y1="8" y2="16"/>
                      <line stroke="currentColor" stroke-width="2" x1="8" x2="16" y1="12" y2="12"/>
                    </svg>
                    <span>还有 {{ matchedMedia.length - 12 }} 个文件</span>
                  </div>
                </div>
              </div>

              <!-- 匹配规则分析 -->
              <div v-if="matchedMedia.length > 0" class="match-analysis">
                <h3 class="analysis-title">匹配分析</h3>
                <div class="analysis-stats">
                  <div class="stat-row">
                    <span class="stat-label">文件类型分布：</span>
                    <div class="type-distribution">
                      <span
                        v-for="(count, type) in typeDistribution"
                        :key="type"
                        class="type-stat"
                      >
                        {{ getMediaTypeLabel(type) }}: {{ count }}个
                      </span>
                    </div>
                  </div>
                  <div class="stat-row">
                    <span class="stat-label">日期范围：</span>
                    <span>{{ formatDateRange(dateRange) }}</span>
                  </div>
                  <div class="stat-row">
                    <span class="stat-label">总大小：</span>
                    <span>{{ formatFileSize(totalSize) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AI 智能建议弹窗 -->
    <div v-if="showAISuggestions" class="ai-suggestions-modal" @click="showAISuggestions = false">
      <div class="modal-content glass-card" @click.stop>
        <div class="modal-header">
          <h3>
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2"/>
            </svg>
            AI 智能建议
          </h3>
          <button class="modal-close" @click="showAISuggestions = false">
            <svg fill="none" viewBox="0 0 24 24">
              <line stroke="currentColor" stroke-width="2" x1="18" x2="6" y1="6" y2="18"/>
              <line stroke="currentColor" stroke-width="2" x1="6" x2="18" y1="6" y2="18"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="suggestion-list">
            <div
              v-for="suggestion in aiSuggestions"
              :key="suggestion.id"
              class="suggestion-item"
            >
              <div class="suggestion-header">
                <span class="suggestion-type">{{ suggestion.type }}</span>
                <span class="suggestion-confidence">{{ suggestion.confidence }}% 匹配</span>
              </div>
              <h4 class="suggestion-title">{{ suggestion.title }}</h4>
              <p class="suggestion-description">{{ suggestion.description }}</p>
              <div class="suggestion-actions">
                <button class="apply-suggestion" @click="applySuggestion(suggestion)">
                  应用建议
                </button>
                <button class="ignore-suggestion" @click="ignoreSuggestion(suggestion)">
                  忽略
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Notify } from '@opentiny/vue'
import { createSmartAlbum, updateSmartAlbum, getSmartAlbumDetail, getMediaFileList } from '@/api/media'

interface AlbumForm {
  name: string
  description: string
  coverImage: string
  isPublic: boolean
  rules: {
    fileTypes: string[]
    dateRange: {
      startDate: string
      endDate: string
    }
    tags: string[]
    people: string[]
    locations: string[]
  }
}

interface MediaFile {
  id: number
  name: string
  fileType: 'image' | 'video' | 'audio' | 'document'
  thumbnailUrl?: string
  fileSize: number
  date: Date
  duration?: number
}

interface AISuggestion {
  id: string
  type: string
  title: string
  description: string
  confidence: number
  rules: any
}

const router = useRouter()
const route = useRoute()

// 响应式数据
const isEditing = ref(false)
const albumForm = ref<AlbumForm>({
  name: '',
  description: '',
  coverImage: '',
  isPublic: false,
  rules: {
    fileTypes: [],
    dateRange: {
      startDate: '',
      endDate: ''
    },
    tags: [],
    people: [],
    locations: []
  }
})

const matchedMedia = ref<MediaFile[]>([])
const previewLoading = ref(false)
const hasChanges = ref(false)
const showAISuggestions = ref(false)
const aiSuggestions = ref<AISuggestion[]>([])

// 表单验证状态
const isValid = computed(() => {
  return albumForm.value.name.trim().length > 0 && (
    albumForm.value.rules.fileTypes.length > 0 ||
    albumForm.value.rules.tags.length > 0 ||
    albumForm.value.rules.people.length > 0 ||
    albumForm.value.rules.locations.length > 0 ||
    (albumForm.value.rules.dateRange.startDate && albumForm.value.rules.dateRange.endDate)
  )
})

// 标签和位置输入
const newTag = ref('')
const newLocation = ref('')
const selectedDatePreset = ref('')

// 配置数据
const fileTypes = ref([
  {
    value: 'image',
    label: '图片',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('rect', { x: '3', y: '3', width: '18', height: '18', rx: '2', ry: '2', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '8.5', cy: '8.5', r: '1.5', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '21,15 16,10 5,21', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    value: 'video',
    label: '视频',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('polygon', { points: '23,7 16,12 23,17', fill: 'currentColor' }),
      h('rect', { x: '1', y: '5', width: '15', height: '14', rx: '2', ry: '2', stroke: 'currentColor', 'stroke-width': '2', fill: 'none' })
    ])
  },
  {
    value: 'audio',
    label: '音频',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M9 18V5l12-2v13', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '6', cy: '18', r: '3', stroke: 'currentColor', 'stroke-width': '2' }),
      h('circle', { cx: '18', cy: '16', r: '3', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  },
  {
    value: 'document',
    label: '文档',
    icon: () => h('svg', { viewBox: '0 0 24 24', fill: 'none' }, [
      h('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', stroke: 'currentColor', 'stroke-width': '2' }),
      h('polyline', { points: '14,2 14,8 20,8', stroke: 'currentColor', 'stroke-width': '2' })
    ])
  }
])

const datePresets = ref([
  { value: 'last-week', label: '最近一周', days: 7 },
  { value: 'last-month', label: '最近一个月', days: 30 },
  { value: 'last-3months', label: '最近三个月', days: 90 },
  { value: 'last-year', label: '最近一年', days: 365 },
  { value: 'this-year', label: '今年', isThisYear: true }
])

const popularTags = ref([
  '家庭', '旅行', '生日', '节日', '聚餐', '自拍',
  '风景', '宠物', '运动', '美食', '工作', '学习'
])

const availablePeople = ref([
  { name: '爸爸', avatar: '/default-avatar.png' },
  { name: '妈妈', avatar: '/default-avatar.png' },
  { name: '小明', avatar: '/default-avatar.png' },
  { name: '小红', avatar: '/default-avatar.png' }
])

// 计算属性
const typeDistribution = computed(() => {
  const distribution: Record<string, number> = {}
  matchedMedia.value.forEach(media => {
    distribution[media.fileType] = (distribution[media.fileType] || 0) + 1
  })
  return distribution
})

const dateRange = computed(() => {
  if (matchedMedia.value.length === 0) return null
  const dates = matchedMedia.value.map(m => m.date).sort((a, b) => a.getTime() - b.getTime())
  return {
    start: dates[0],
    end: dates[dates.length - 1]
  }
})

const totalSize = computed(() => {
  return matchedMedia.value.reduce((sum, media) => sum + media.fileSize, 0)
})

// 页面初始化
onMounted(() => {
  const albumId = route.params.id as string
  if (albumId && albumId !== 'new') {
    isEditing.value = true
    loadAlbum(parseInt(albumId))
  }

  // 监听表单变化
  watch(albumForm, () => {
    hasChanges.value = true
    refreshPreview()
  }, { deep: true })

  // 初始预览
  refreshPreview()

  // 生成AI建议
  generateAISuggestions()
})

// 数据加载和处理
const loadAlbum = async (albumId: number) => {
  try {
    const response = await getSmartAlbumDetail(albumId)
    const album = response.data

    albumForm.value = {
      name: album.name,
      description: album.description || '',
      coverImage: album.coverImage || '',
      isPublic: album.isPublic,
      rules: album.rules
    }
  } catch (error) {
    console.error('加载相册失败:', error)
    Notify({
      type: 'error',
      message: '加载相册信息失败',
      position: 'top-right'
    })
  }
}

const refreshPreview = async () => {
  if (!hasValidRules()) return

  previewLoading.value = true

  try {
    // 模拟API调用获取匹配的媒体文件
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 生成模拟数据
    matchedMedia.value = generateMockMatchedMedia()
  } catch (error) {
    console.error('刷新预览失败:', error)
  } finally {
    previewLoading.value = false
  }
}

const generateMockMatchedMedia = (): MediaFile[] => {
  const mockData: MediaFile[] = []
  const { fileTypes, tags, dateRange } = albumForm.value.rules

  // 根据筛选条件生成模拟数据
  const types = fileTypes.length > 0 ? fileTypes : ['image', 'video', 'audio', 'document']
  const count = Math.floor(Math.random() * 20) + 5

  for (let i = 0; i < count; i++) {
    const randomType = types[Math.floor(Math.random() * types.length)] as 'image' | 'video' | 'audio' | 'document'
    const startDate = dateRange.startDate ? new Date(dateRange.startDate) : new Date(2024, 0, 1)
    const endDate = dateRange.endDate ? new Date(dateRange.endDate) : new Date()
    const randomDate = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))

    mockData.push({
      id: i + 1,
      name: generateRandomFileName(randomType),
      fileType: randomType,
      thumbnailUrl: randomType === 'image' ?
        `https://picsum.photos/400/300?random=${i}` : undefined,
      fileSize: Math.floor(Math.random() * 10000000) + 100000,
      date: randomDate,
      duration: randomType === 'video' || randomType === 'audio' ?
        Math.floor(Math.random() * 300) + 30 : undefined
    })
  }

  return mockData.sort((a, b) => b.date.getTime() - a.date.getTime())
}

const generateRandomFileName = (type: string): string => {
  const imageNames = ['美好回忆', '家庭合照', '旅行风景', '日常生活', '特殊时刻']
  const videoNames = ['生日派对', '旅行记录', '家庭聚会', '运动视频', '宠物视频']
  const audioNames = ['家庭录音', '音乐收藏', '语音备忘', '电话录音', '现场录音']
  const documentNames = ['重要文档', '旅行计划', '购物清单', '学习笔记', '工作资料']

  const names = {
    image: imageNames,
    video: videoNames,
    audio: audioNames,
    document: documentNames
  }[type] || ['文件']

  const extensions = {
    image: ['jpg', 'png', 'gif'],
    video: ['mp4', 'avi', 'mov'],
    audio: ['mp3', 'wav', 'aac'],
    document: ['pdf', 'doc', 'txt']
  }[type] || ['file']

  const name = names[Math.floor(Math.random() * names.length)]
  const ext = extensions[Math.floor(Math.random() * extensions.length)]

  return `${name}.${ext}`
}

const hasValidRules = (): boolean => {
  const { fileTypes, tags, people, locations, dateRange } = albumForm.value.rules
  return fileTypes.length > 0 || tags.length > 0 || people.length > 0 ||
         locations.length > 0 || (dateRange.startDate && dateRange.endDate)
}

// 表单验证和处理
const validateForm = () => {
  hasChanges.value = true
}

const addTag = () => {
  if (newTag.value.trim() && !albumForm.value.rules.tags.includes(newTag.value.trim())) {
    albumForm.value.rules.tags.push(newTag.value.trim())
    newTag.value = ''
    validateForm()
  }
}

const removeTag = (tag: string) => {
  const index = albumForm.value.rules.tags.indexOf(tag)
  if (index > -1) {
    albumForm.value.rules.tags.splice(index, 1)
    validateForm()
  }
}

const addPopularTag = (tag: string) => {
  if (!albumForm.value.rules.tags.includes(tag)) {
    albumForm.value.rules.tags.push(tag)
    validateForm()
  }
}

const addLocation = () => {
  if (newLocation.value.trim() && !albumForm.value.rules.locations.includes(newLocation.value.trim())) {
    albumForm.value.rules.locations.push(newLocation.value.trim())
    newLocation.value = ''
    validateForm()
  }
}

const removeLocation = (location: string) => {
  const index = albumForm.value.rules.locations.indexOf(location)
  if (index > -1) {
    albumForm.value.rules.locations.splice(index, 1)
    validateForm()
  }
}

const addPerson = (person: string) => {
  if (!albumForm.value.rules.people.includes(person)) {
    albumForm.value.rules.people.push(person)
    validateForm()
  }
}

const removePerson = (person: string) => {
  const index = albumForm.value.rules.people.indexOf(person)
  if (index > -1) {
    albumForm.value.rules.people.splice(index, 1)
    validateForm()
  }
}

const applyDatePreset = (preset: any) => {
  selectedDatePreset.value = preset.value
  const now = new Date()

  if (preset.isThisYear) {
    albumForm.value.rules.dateRange.startDate = new Date(now.getFullYear(), 0, 1).toISOString().split('T')[0]
    albumForm.value.rules.dateRange.endDate = now.toISOString().split('T')[0]
  } else {
    const startDate = new Date(now.getTime() - preset.days * 24 * 60 * 60 * 1000)
    albumForm.value.rules.dateRange.startDate = startDate.toISOString().split('T')[0]
    albumForm.value.rules.dateRange.endDate = now.toISOString().split('T')[0]
  }

  validateForm()
}

const uploadCover = () => {
  // 这里实现封面上传逻辑
  Notify({
    type: 'info',
    message: '封面上传功能开发中...',
    position: 'top-right'
  })
}

const getPersonAvatar = (person: string): string => {
  const found = availablePeople.value.find(p => p.name === person)
  return found?.avatar || '/default-avatar.png'
}

// AI 建议功能
const generateAISuggestions = () => {
  // 模拟AI建议生成
  aiSuggestions.value = [
    {
      id: '1',
      type: '智能命名',
      title: '建议相册名称：春节家庭聚会',
      description: '根据选择的时间范围和标签，建议使用此名称',
      confidence: 85,
      rules: { name: '春节家庭聚会' }
    },
    {
      id: '2',
      type: '标签建议',
      title: '添加热门标签',
      description: '建议添加"节日"、"聚餐"等相关标签以获得更多匹配',
      confidence: 92,
      rules: { tags: ['节日', '聚餐', '欢乐'] }
    }
  ]
}

const applySuggestion = (suggestion: AISuggestion) => {
  if (suggestion.rules.name) {
    albumForm.value.name = suggestion.rules.name
  }
  if (suggestion.rules.tags) {
    suggestion.rules.tags.forEach((tag: string) => {
      if (!albumForm.value.rules.tags.includes(tag)) {
        albumForm.value.rules.tags.push(tag)
      }
    })
  }

  validateForm()
  showAISuggestions.value = false

  Notify({
    type: 'success',
    message: '已应用AI建议',
    position: 'top-right'
  })
}

const ignoreSuggestion = (suggestion: AISuggestion) => {
  const index = aiSuggestions.value.findIndex(s => s.id === suggestion.id)
  if (index > -1) {
    aiSuggestions.value.splice(index, 1)
  }
}

// 主要操作
const saveDraft = async () => {
  try {
    // 这里实现草稿保存逻辑
    Notify({
      type: 'success',
      message: '草稿已保存',
      position: 'top-right'
    })
  } catch (error) {
    Notify({
      type: 'error',
      message: '保存草稿失败',
      position: 'top-right'
    })
  }
}

const createAlbum = async () => {
  if (!isValid.value) {
    Notify({
      type: 'warning',
      message: '请填写完整的相册信息',
      position: 'top-right'
    })
    return
  }

  try {
    if (isEditing.value) {
      await updateSmartAlbum(parseInt(route.params.id as string), albumForm.value)
      Notify({
        type: 'success',
        message: '智能相册更新成功',
        position: 'top-right'
      })
    } else {
      await createSmartAlbum(albumForm.value)
      Notify({
        type: 'success',
        message: '智能相册创建成功',
        position: 'top-right'
      })
    }

    router.push('/media/albums')
  } catch (error) {
    console.error('操作失败:', error)
    Notify({
      type: 'error',
      message: isEditing.value ? '更新相册失败' : '创建相册失败',
      position: 'top-right'
    })
  }
}

const goBack = () => {
  if (hasChanges.value) {
    if (confirm('有未保存的更改，确定要离开吗？')) {
      router.back()
    }
  } else {
    router.back()
  }
}

const previewMedia = (media: MediaFile) => {
  router.push(`/media/${media.id}`)
}

// 工具函数
const getFileTypeIcon = (type: string) => {
  const iconMap = {
    image: 'IconImage',
    video: 'IconVideo',
    audio: 'IconMusic',
    document: 'IconDocument'
  }
  return iconMap[type] || 'IconFile'
}

const getMediaTypeLabel = (type: string) => {
  const labelMap = {
    image: '图片',
    video: '视频',
    audio: '音频',
    document: '文档'
  }
  return labelMap[type] || '文件'
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (date: Date): string => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const formatDateRange = (range: any): string => {
  if (!range) return '无'
  return `${formatDate(range.start)} - ${formatDate(range.end)}`
}

const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/glassmorphism.scss';

.album-create-view {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;

  .glass-card {
    @include glass-card;
    margin-bottom: 2rem;
  }

  .page-header {
    max-width: 1400px;
    margin: 0 auto 2rem;

    .header-content {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1.5rem 2rem;
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

      .header-left {
        .back-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.25rem;
          background: rgba(255, 255, 255, 0.15);
          color: white;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);

          &:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .header-info {
        flex: 1;

        .page-title {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.75rem;
          font-weight: 700;
          color: white;
          margin: 0 0 0.5rem 0;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

          svg {
            width: 28px;
            height: 28px;
            color: rgba(255, 255, 255, 0.8);
          }
        }

        .page-description {
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.95rem;
          margin: 0;
          line-height: 1.5;
        }
      }

      .header-actions {
        display: flex;
        gap: 0.75rem;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.25rem;
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 0.9rem;
          font-weight: 500;
          backdrop-filter: blur(10px);

          svg {
            width: 16px;
            height: 16px;
          }

          &.primary {
            background: rgba(59, 130, 246, 0.3);
            color: white;
            border-color: rgba(59, 130, 246, 0.4);

            &:hover:not(:disabled) {
              background: rgba(59, 130, 246, 0.4);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }

          &.secondary {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border-color: rgba(255, 255, 255, 0.2);

            &:hover:not(:disabled) {
              background: rgba(255, 255, 255, 0.25);
              transform: translateY(-2px);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 2rem;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .form-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .form-card {
    .card-header {
      padding: 1.5rem 1.5rem 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .card-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        margin: 0;

        svg {
          width: 18px;
          height: 18px;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .card-subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        margin: 0.5rem 0 0 0;
      }
    }

    .card-content {
      padding: 1.5rem;
    }
  }

  .form-group {
    margin-bottom: 1.5rem;

    .form-label {
      display: block;
      font-weight: 500;
      color: white;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;

      &.required::after {
        content: ' *';
        color: #ef4444;
      }
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 0.75rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: white;
      font-size: 0.9rem;
      backdrop-filter: blur(10px);

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      &:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        background: rgba(255, 255, 255, 0.15);
      }
    }

    .input-help {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 0.25rem;
      text-align: right;
    }
  }

  .cover-upload {
    .cover-preview {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: 8px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .remove-cover {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.7);
        border: none;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          width: 12px;
          height: 12px;
        }
      }
    }

    .cover-placeholder {
      width: 120px;
      height: 120px;
      background: rgba(255, 255, 255, 0.1);
      border: 2px dashed rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: white;

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
      }

      svg {
        width: 24px;
        height: 24px;
        margin-bottom: 0.5rem;
        opacity: 0.7;
      }

      span {
        font-size: 0.8rem;
        text-align: center;
      }
    }
  }

  .privacy-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    .privacy-option {
      .option-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.2);
        }

        svg {
          width: 20px;
          height: 20px;
          color: rgba(255, 255, 255, 0.7);
        }

        .option-text {
          color: white;

          strong {
            display: block;
            font-weight: 500;
            margin-bottom: 0.25rem;
          }

          span {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }

      input[type="radio"]:checked + .option-content {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.5);
      }

      input[type="radio"] {
        display: none;
      }
    }
  }

  .rule-group {
    margin-bottom: 2rem;

    .rule-label {
      display: block;
      font-weight: 600;
      color: white;
      margin-bottom: 1rem;
      font-size: 1rem;
    }
  }

  .type-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;

    .type-option {
      .type-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: white;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.2);
        }

        .type-icon {
          width: 20px;
          height: 20px;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      &.active .type-content {
        background: rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.5);
      }

      input[type="checkbox"] {
        display: none;
      }
    }
  }

  .date-range-options {
    .quick-dates {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;

      .date-preset {
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        color: white;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.15);
        }

        &.active {
          background: rgba(59, 130, 246, 0.3);
          border-color: rgba(59, 130, 246, 0.5);
        }
      }
    }

    .custom-date-range {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;

      .date-input-group {
        label {
          display: block;
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 0.25rem;
        }

        .date-input {
          width: 100%;
          padding: 0.5rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          color: white;
          font-size: 0.9rem;

          &:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.5);
            background: rgba(255, 255, 255, 0.15);
          }
        }
      }
    }
  }

  .tags-input {
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.75rem;

      .tag-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        background: rgba(59, 130, 246, 0.2);
        color: white;
        border-radius: 15px;
        font-size: 0.8rem;

        button {
          background: none;
          border: none;
          color: inherit;
          cursor: pointer;
          padding: 0;
          display: flex;
          align-items: center;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .tag-input {
      width: 100%;
      padding: 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: white;
      font-size: 0.9rem;

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      &:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        background: rgba(255, 255, 255, 0.15);
      }
    }
  }

  .popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;

    .popular-label {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .popular-tag {
      padding: 0.25rem 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      color: white;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.15);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  .people-selector {
    .selected-people {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;

      .person-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: rgba(59, 130, 246, 0.2);
        border-radius: 20px;
        color: white;

        .person-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        button {
          background: none;
          border: none;
          color: inherit;
          cursor: pointer;
          padding: 0;
          display: flex;
          align-items: center;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .people-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;

      .person-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.15);
        }

        .person-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .location-input {
    .location-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.75rem;

      .location-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        background: rgba(16, 185, 129, 0.2);
        color: white;
        border-radius: 15px;
        font-size: 0.8rem;

        svg {
          width: 12px;
          height: 12px;
        }

        button {
          background: none;
          border: none;
          color: inherit;
          cursor: pointer;
          padding: 0;
          display: flex;
          align-items: center;

          svg {
            width: 12px;
            height: 12px;
          }
        }
      }
    }

    .location-input-field {
      width: 100%;
      padding: 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: white;
      font-size: 0.9rem;

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      &:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        background: rgba(255, 255, 255, 0.15);
      }
    }
  }

  .preview-section {
    .preview-card {
      position: sticky;
      top: 2rem;
      height: fit-content;

      .preview-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;

        .stat-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.9rem;

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .refresh-preview {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.5rem 0.75rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          color: white;
          font-size: 0.8rem;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.15);
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          svg {
            width: 14px;
            height: 14px;

            &.animate-spin {
              animation: spin 1s linear infinite;
            }
          }
        }
      }
    }
  }

  .preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: white;

    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(255, 255, 255, 0.2);
      border-top: 3px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 1rem;
    }

    p {
      margin: 0;
      font-size: 0.9rem;
      opacity: 0.8;
    }
  }

  .preview-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: white;

    .empty-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 1rem;
      opacity: 0.5;

      svg {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.1rem;
    }

    p {
      margin: 0 0 1rem 0;
      opacity: 0.8;
      font-size: 0.9rem;
    }

    .suggestions {
      text-align: left;
      background: rgba(255, 255, 255, 0.05);
      padding: 1rem;
      border-radius: 8px;
      margin-top: 1rem;

      p {
        margin: 0 0 0.5rem 0;
        font-weight: 500;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;
        font-size: 0.85rem;
        opacity: 0.8;

        li {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  .preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

    .preview-item {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
      }

      .media-thumbnail {
        position: relative;
        aspect-ratio: 16/10;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .placeholder-icon {
          width: 24px;
          height: 24px;
          color: rgba(255, 255, 255, 0.5);
        }

        .media-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding: 0.5rem;
          opacity: 0;
          transition: opacity 0.2s ease;

          .media-type,
          .media-duration {
            font-size: 0.7rem;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
          }
        }

        &:hover .media-overlay {
          opacity: 1;
        }
      }

      .media-info {
        padding: 0.75rem;

        .media-name {
          margin: 0 0 0.25rem 0;
          font-size: 0.8rem;
          font-weight: 500;
          color: white;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .media-meta {
          display: flex;
          justify-content: space-between;
          font-size: 0.7rem;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }

    .more-results {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.7);

      .more-count {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;

        svg {
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .match-analysis {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    .analysis-title {
      margin: 0 0 1rem 0;
      font-size: 1rem;
      font-weight: 600;
      color: white;
    }

    .analysis-stats {
      .stat-row {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        font-size: 0.85rem;

        .stat-label {
          min-width: 80px;
          color: rgba(255, 255, 255, 0.7);
          font-weight: 500;
        }

        .type-distribution {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;

          .type-stat {
            padding: 0.25rem 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            font-size: 0.75rem;
            color: white;
          }
        }
      }
    }
  }

  .ai-suggestions-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);

    .modal-content {
      max-width: 600px;
      max-height: 80vh;
      width: 90vw;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        h3 {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin: 0;
          color: white;
          font-size: 1.1rem;

          svg {
            width: 18px;
            height: 18px;
            color: #f59e0b;
          }
        }

        .modal-close {
          width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.1);
          border: none;
          border-radius: 50%;
          color: white;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }

      .modal-body {
        padding: 1.5rem;
        overflow-y: auto;
      }
    }
  }

  .suggestion-list {
    .suggestion-item {
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      margin-bottom: 1rem;

      &:last-child {
        margin-bottom: 0;
      }

      .suggestion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;

        .suggestion-type {
          padding: 0.25rem 0.5rem;
          background: rgba(59, 130, 246, 0.2);
          color: white;
          border-radius: 12px;
          font-size: 0.75rem;
          font-weight: 500;
        }

        .suggestion-confidence {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .suggestion-title {
        margin: 0 0 0.5rem 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: white;
      }

      .suggestion-description {
        margin: 0 0 1rem 0;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.4;
      }

      .suggestion-actions {
        display: flex;
        gap: 0.5rem;

        button {
          padding: 0.5rem 1rem;
          border: none;
          border-radius: 6px;
          font-size: 0.8rem;
          cursor: pointer;
          transition: all 0.2s ease;

          &.apply-suggestion {
            background: rgba(59, 130, 246, 0.3);
            color: white;

            &:hover {
              background: rgba(59, 130, 246, 0.4);
            }
          }

          &.ignore-suggestion {
            background: rgba(255, 255, 255, 0.1);
            color: white;

            &:hover {
              background: rgba(255, 255, 255, 0.15);
            }
          }
        }
      }
    }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .main-content .content-grid {
      grid-template-columns: 1fr;

      .preview-card {
        position: static;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 1rem 0.5rem;

    .page-header .header-content {
      flex-direction: column;
      gap: 1rem;

      .header-actions {
        width: 100%;
        justify-content: center;
      }
    }

    .privacy-options {
      grid-template-columns: 1fr;
    }

    .type-filters {
      grid-template-columns: 1fr;
    }

    .custom-date-range {
      grid-template-columns: 1fr;
    }

    .preview-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
</style>
